<template>
  <div class="app-container">
    <div style="height:44px;">
      <el-col :span="24" class="toolbar" style="padding-bottom: 10px;">
        <el-button type="primary" @click="routyundan">新建运单模板</el-button>
      </el-col>
    </div>
    <div>
      <div>
        <h5 class="moban_title">
          <p class="moban_titleft">默认地区运单</p>
          <p class="moban_titright">
            最后编辑时间：2019-03-21 16:02:40
            <span style="margin-left:5%">修改</span>
            <span>|</span>
            <span>删除</span>
          </p>
        </h5>
        <el-table
          :data="tableDatao"
          style="width: 100%"
          align="center"
          header-align="center"
          border
        >
          <el-table-column prop="types" label="运送方式"></el-table-column>
          <el-table-column prop="yunto" label="运送到" align="center"></el-table-column>
          <el-table-column prop="jfrules" label="计费规则" align="center"></el-table-column>
        </el-table>
      </div>
      <div>
        <h5 class="moban_title">
          <p class="moban_titleft">部分地区不满99</p>
          <p class="moban_titright">
            最后编辑时间：2019-03-21 16:02:40
            <span style="margin-left:5%">修改</span>
            <span>|</span>
            <span>删除</span>
          </p>
        </h5>
        <el-table
          :data="tableDatat"
          style="width: 100%"
          align="center"
          header-align="center"
          border
        >
          <el-table-column prop="types" label="运送方式"></el-table-column>
          <el-table-column prop="yunto" label="运送到" align="center"></el-table-column>
          <el-table-column prop="jfrules" label="计费规则" align="center"></el-table-column>
        </el-table>
      </div>
      <div>
        <h5 class="moban_title">
          <p class="moban_titleft">部分地区不满49</p>
          <p class="moban_titright">
            最后编辑时间：2019-03-21 16:02:40
            <span style="margin-left:5%">修改</span>
            <span>|</span>
            <span>删除</span>
          </p>
        </h5>
        <el-table
          :data="tableDatas"
          style="width: 100%"
          align="center"
          header-align="center"
          border
        >
          <el-table-column prop="types" label="运送方式"></el-table-column>
          <el-table-column prop="yunto" label="运送到" align="center"></el-table-column>
          <el-table-column prop="jfrules" label="计费规则" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "yundanyunfei",
  data() {
    return {
      //全部数据
      tableDatao: [
        {
          types: "快递",
          yunto: "北京，上海，天津，重庆",
          jfrules: "固定运费10.00"
        }
      ],
      tableDatat: [
        {
          types: "快递",
          yunto: "湖南",
          jfrules: "每张订单不满 99.00元，运费 6.00 元"
        }
      ],
      tableDatas: [
        {
          types: "快递",
          yunto: "湖南",
          jfrules: "固定运费10.00"
        }
      ],
      // 分页工具
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    };
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
    routyundan() {
      this.$router.push("/yundanmoban");
    }
  }
};
</script>
<style lang="scss" scoped>
.moban_title {
  width: 100%;
  height: auto;
  background: rgba(228, 238, 247, 1);
  float: left;
  padding: 0 0 0 3%;
  margin: 0;
  .moban_titleft {
    float: left;
    width: 60%;
  }
  .moban_titright {
    float: left;
    width: 30%;
    color: #bcbcbc;
    > span {
      color: rgb(0, 153, 0);
    }
  }
}
</style>